<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta name="decorator" content="default" />
<link href="${ctxStatic}/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<link href="${ctxStatic}/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<style type="text/css">
.panel-primary>.panel-heading {
    background-image: linear-gradient(to bottom, #008cd6 0, #3eb5ea 100%);
}
.panel-body {
    height: 345px;
}
</style>
<title>首页</title>
<script type="text/javascript">
$(document).ready(function() {
	$.ajax({
		url : "${ctxStatic}/common/map/340600.json",
		type : "get",
		dataType : "json",//jsonp数据类型 
		jsonp : "callback",//服务端用于接收callback调用的function名的参数 
		jsonpCallback : "message",
		success : function(data) {
			$.getJSON("${ctxStatic}/common/map/340600.json");
			echarts.registerMap('xuancheng', data);

			var chartMap = echarts.init(document.getElementById('map'));
			
			chartMap.setOption(optionMap);
			//轮播展示
			var currentIndex = -1;
			setInterval(function() {
				var dataLen = optionMap.series[0].data.length;
				// 取消之前高亮的图形
				chartMap.dispatchAction({
					type : 'downplay',
					seriesIndex : 0, //表示series中的第几个data数据循环展示
					dataIndex : currentIndex
				});
				currentIndex = (currentIndex + 1) % dataLen; //+1表示每次跳转一个
				// 高亮当前图形
				chartMap.dispatchAction({
					type : 'highlight',
					seriesIndex : 0,
					dataIndex : currentIndex
				});
				// 显示 tooltip
				chartMap.dispatchAction({
					type : 'showTip',
					seriesIndex : 0,
					dataIndex : currentIndex
				});
			}, 1000);
			//鼠标点击事件
			/* chartMap.on('click', function(params) {
				var cityName = params.name;
				var cityValue = params.value;
				alert(cityName + "***" + cityValue);
			}); */
		},
		error : function() {
			alert('fail....');
		}
	});
	
	var StockAndSalesChart = echarts.init(document.getElementById('StockAndSales'));
	StockAndSalesChart.setOption(StockAndSalesOption);
	
	var ChildrenRecordChart = echarts.init(document.getElementById('ChildrenRecord'));
	ChildrenRecordChart.setOption(ChildrenRecordOption);
	
	var PeopleChart1 = echarts.init(document.getElementById('People1'));
	PeopleChart1.setOption(optionPie1);
	
	/* var PeopleChart2 = echarts.init(document.getElementById('People2'));
	PeopleChart2.setOption(optionPie2); */
});
var optionMap = {
	tooltip : {
		trigger : 'item'
	},
	dataRange : {
		min : 800,
		max : 50000,
		text : [ 'High', 'Low' ],
		realtime : false,
		calculable : true,
		color : [ '#254d8c', '#32c3ff', '#32e4ff', '#4477c4',
				'#329cff' ],
		show : false
	},
	series : [ {
		type : 'map',
		map : 'xuancheng',
		layoutCenter : [ '50%', '50%' ],
		layoutSize : 300,
		itemStyle : {
			normal : {
				borderWidth : 1, //区域边框宽度
				borderColor : '#12446d', //区域边框颜色
				label : {
					show : true,
					color : '#000'
				},
				areaColor : [ '#2c74d3' ]
			},
			emphasis : {
				label : {
					show : true,
					color : '#fff'
				},
				areaColor : '#32fdff'
			}
		},
		data : [ {
				name : '杜集区',
				value : 16
			}, {
				name : '烈山区',
				value : 18
			}, {
				name : '相山区',
				value : 20
			}, {
				name : '濉溪县',
				value : 27
			},
		/* {
			name: '合肥市',
			value: 229
		}, {
			name: '芜湖市',
			value: 146
		}, {
			name: '蚌埠市',
			value: 117
		}, {
			name: '淮南市',
			value: 99
		}, {
			name: '马鞍山市',
			value: 78
		}, {
			name: '淮北市',
			value: 82
		}, {
			name: '铜陵市',
			value: 42
		}, {
			name: '安庆市',
			value: 227
		}, {
			name: '黄山市',
			value: 116
		}, {
			name: '滁州市',
			value: 159
		}, {
			name: '阜阳市',
			value: 246
		}, {
			name: '宿州市',
			value: 165
		}, {
			name: '六安市',
			value: 206
		}, {
			name: '亳州市',
			value: 114
		}, {
			name: '池州市',
			value: 73
		}, {
			name: '宣城市',
			value: 162
		}, */ ]
	} ]
};

var StockAndSalesOption = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['领取/购进','下级退回','退回上级','报废','下发/售出','月末总库存']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: JSON.parse('${fns:toJson(dateList)}')
//         	['2017年1月','2017年2月','2017年3月','2017年4月','2017年5月','2017年6月','2017年7月','2017年8月','2017年9月','2017年10月','2017年11月','2017年12月']
    },
    yAxis: {
        type: 'value'
    },
    series: [
    	{
            name:'领取/购进',
            type:'line',
            /* stack: '总量', */
            data: JSON.parse('${fns:toJson(inList)}')
//             	[191, 234, 290, 330, 310 ,220, 182, 191, 234, 2600, 60000, 4651]
        },
        {
            name:'下级退回',
            type:'line',
          /*   stack: '总量', */
            data:JSON.parse('${fns:toJson(reList)}')
//             	[330, 310 , 4201, 154, 3190, 1950, 26405, 201, 154, 190, 950, 53749]
        },
        {
            name:'退回上级',
            type:'line',
            /* stack: '总量', */
            data:JSON.parse('${fns:toJson(returnList)}')
//             	[0, 0 , 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        },
        {
            name:'报废',
            type:'line',
            /* stack: '总量', */
            data:JSON.parse('${fns:toJson(abdList)}')
//             	[ 8491, 5150, 6232,1320, 4332,3820, 5760, 9001, 9034, 3290, 1330, 0]
        },
        {
            name:'下发/售出',
            type:'line',
            /* stack: '总量', */
            data:JSON.parse('${fns:toJson(outList)}')
//             	[ 257192, 445760, 257192, 435760, 357192, 257192, 425760, 357192,257192, 415760, 357192, 233313]
        },
        {
            name:'月末总库存',
            type:'line',
            /* stack: '总量', */
            data: JSON.parse('${fns:toJson(sumList)}')
        } 
    ]
};

ChildrenRecordOption = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    color: ['#3398DB'],
    legend: {
    	data:['人数']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data: ['濉溪镇卫生院  '  , '孟山中路门诊   ' , '淮海路门诊     ' , '百善镇卫生院   ' , '铁佛镇岳集分院 ' ,
            	'临涣镇卫生院   ' , '南坪镇卫生院   ' , '孙疃镇卫生院   ' , '韩村镇卫生院   ' , '五沟镇卫生院   ' , 
            	'铁佛镇卫生院   ' , '双堆镇三和分院 ' , '宋疃镇卫生院   ' , '刘桥镇卫生院   ' , '双堆镇卫生院   ' ,
            	'四铺镇五铺门诊 ' , '孙疃镇杨柳分院 ' , '张庄医院       ' , '四铺镇卫生院   ' , '五沟镇白沙分院 ' , 
            	'曲阳社区       ' , '杜集区人民医院 ' , '赵集卫生院     ' , '南坪镇任集门诊 ' , '百善镇徐楼分院 ' , 
            	'古饶镇卫生院   ' , '相城医院       ' , '渠沟镇卫生院   ' , '烈山镇卫生院   ' , '凤凰社区中心   ' , 
            	'石台镇卫生院   ' , '杨庄街道中心   ' , '人民路中心     ' , '任圩社区       ' , '临涣镇海孜分院 ' ,
            	'第四人民医院   ' , '高岳社区中心   ' , '大山头门诊     ' , '坡里卫生院     ' , '牛眠卫生院     ' ,
            	'朔里镇中心卫生院', '矿医杨庄分院   ' , '段元镇卫生院   ' , '皖北二院       ' , '百善矿医院     ' ,
            	'矿医朔里分院   ' , '烈山区海孜医院 ' , '矿医岱河分院   ' , '矿医袁庄分院   ' , '矿医童亭分院   ' ,
            	'任楼矿医院     ' , '青龙山社区     '
			],
			axisLabel:{
				interval:1,//横轴信息全部显示  
			    rotate:45, //刻度旋转45度角
			    textStyle:{
			    	fontSize:10
			 		}
				}
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            //name:'领取/购进',
            type:'bar',
            data:[3386 , 2291 , 1876 , 1109 , 1094 ,
            	1003 , 982  , 950  , 921  , 871  ,
            	847  , 833  , 778  , 774  , 691  ,
            	684  , 677  , 665  , 663  , 661  , 
            	634  , 592  , 589  , 583  , 562  , 
            	509  , 487  , 470  , 448  , 433  , 
            	414  , 388  , 365  , 353  , 339  ,
            	323  , 289  , 268  , 262  , 246  , 
            	218  , 206  , 195  , 148  , 105  ,
            	97   , 94   , 89   , 77   , 74   ,
            	73   , 33
]
        }
    ]
};

optionPie1 = {
   /*  title : {
        text: '2017年11月',
        //subtext: '纯属虚构',
        x:'right'
    }, */
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: JSON.parse('${fns:toJson(pNameList)}')
        	/* ['一次性注射器',
        	'乙肝疫苗(酿酒酵母)',
        	'百白破疫苗(无细胞)',
        	'A+C群流脑疫苗(多糖)',
        	'A+C群流脑疫苗(结合)',
        	'乙肝疫苗(汉逊酵母)',
        	'麻风疫苗',
        	'乙脑减毒活疫苗',
        	'二价脊灰疫苗',
        	'麻腮风疫苗   ',
        	'甲肝减毒活疫苗(冻干)',
        	'狂犬病疫苗(Vero冻干)',
        	'Hib疫苗',
        	'狂犬病疫苗(Vero)',
        	'狂犬病疫苗(地鼠肾)','其他' ] */
    },
    series : [
        {
            name: '库存比例',
            type: 'pie',
            radius : '65%',
            center : ['70%', '60%'],
            data: JSON.parse('${fns:toJson(pList)}'),
           	/* [
            	{value:127000	, name:'一次性注射器 '},
            	{value:31366	, name:'乙肝疫苗(酿酒酵母)'},
            	{value:22800	, name:'百白破疫苗(无细胞)'},
            	{value:17440	, name:'A+C群流脑疫苗(多糖)'},
            	{value:15700	, name:'A+C群流脑疫苗(结合)'},
            	{value:12310	, name:'乙肝疫苗(汉逊酵母)'},
            	{value:11270	, name:'麻风疫苗'},
            	{value:10620	, name:'乙脑减毒活疫苗'},
            	{value:9520     , name:'二价脊灰疫苗'},
            	{value:9280     , name:'麻腮风疫苗'},
            	{value:8560     , name:'甲肝减毒活疫苗(冻干)'},
            	{value:7655     , name:'狂犬病疫苗(Vero冻干)'},
            	{value:6700     , name:'Hib疫苗'},
            	{value:4272     , name:'狂犬病疫苗(Vero)'},
            	{value:4200     , name:'狂犬病疫苗(地鼠肾)'} ,
            	{value:23885     , name:'其他'}
            ], */
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

</script>

</head>
<body>
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="col-md-8">
				<div class="panel panel-primary bg-primary">
					<div class="panel-heading">
						进销存数据统计
					</div>
					<div  id="StockAndSales" class="panel-body">内容加载中...</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="panel panel-primary bg-primary">
					<div class="panel-heading">
						区域门诊数量统计
					</div>
					<div class="panel-body" id = "map">内容加载中...</div>
				</div>
			</div>
			<div class="col-md-8">
				<div class="panel panel-primary">
					<div class="panel-heading">
						门诊年服务人数统计
					</div>
					<div class="panel-body" id = "ChildrenRecord">内容加载中...</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="panel panel-primary">
					<div class="panel-heading">
						疫苗比例统计
					</div>
					<div  id="People1" class="panel-body">内容加载中...
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>